<template>
	<div id="app">
		<Banner title="数据分析系统" />
		<div class="container_main">
			<div class="area_Up">
				<div class="left_Row">
					<CraftData title="设计数据" />
					<StatisticalData title="统计数据" />
					<YearData id="usage" title="射孔层位数据" />
				</div>
				<div class="right_Row">
					<ChinaData title="设计数据" />
					<RealtimeData title="实时数据" />
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import Banner from "../components/home/Banner.vue";
	import StatisticalData from "../components/home/StatisticalData.vue";
	import YearData from "../components/home/YearData.vue";
	import CraftData from "../components/home/CraftData.vue";
	import MapData from "../components/home/MapData.vue";
	import ChinaData from "../components/home/ChinaData.vue";
	import RealtimeData from "../components/home/RealtimeData.vue";
	import MtableRight from "../components/home/MtableRight.vue";
	import AnalyzeData from "../components/home/AnalyzeData.vue";
	// import StatisticalData from '../components/home/StatisticalData.vue'
	import {
		getSucaiCategoryList
	} from "@/api/index";
	export default {
		name: "app",
		components: {
			Banner,
			// StableDepth,
			ChinaData,
			YearData,
			CraftData,
			RealtimeData,
			MtableRight,
			AnalyzeData,
			StatisticalData,
			MapData
		},
		mounted() {
			// this.fetchInit();
		},
		methods: {
			fetchInit(type, index) {
				console.log("第一个请求");
				getSucaiCategoryList().then(res => {
					console.log("获取素材分类列表", res);
					let {
						data: {
							code,
							data,
							msg
						}
					} = res;
					if (code === 0) {
						console.log(2222, code, data);
					}
				});
			}
		}
	};
</script>

<style scoped lang="less">
	.container_main {
		width: 100%;
		height: 87%;
		/* background: pink; */
		
		box-sizing: border-box;
		padding: 2%;
		padding-top: 0;
		/* display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto; */
		/* background-color: bisque; */
	}

	.area_Up {
		margin-top: -1%;
		width: 100%;
		height: 100%;
		display: flex;
	}

	.left_Row {
		width: 36%;
		// margin-right: 2%;
	}

	.right_Row {
		width: 66%;
		margin-left: 0.6%;
	}

	body {
		margin: 0;
		padding: 0;
		color: rgb(255, 255, 255);
		background-color: rgb(0, 16, 47);
	}

	#app {
		font-family: Avenir, Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		/* background-color: rgb(0, 16, 47); */
	}
</style>
